// Copyright 2018-2020 Streamlit Inc.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//    http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

// (Using a different license header format here because scss-to-json doesn't
// like multi-line comments)

// Overwrite some basic colors.
$white: #ffffff;
$gray-050: #fafafa;
$gray-100: #fafafa;
$gray-200: #f0f2f6;
$gray-300: #e6eaf1;
$gray-400: #d5dae5;
$gray-500: #bfc5d3;
$gray-600: #a3a8b4;
$gray-700: #808495;
$gray-800: #555867;
$gray-900: #262730;
$gray-1000: #0e1117;
$black: $gray-900;
$red: #ff2b2b;
$yellow: #faca2b;
$blue: #0068c9;
$green: #09ab3b;

// Custom color for our own use.
$gray-faint: $gray-100;
$gray-lightest: $gray-200;
$gray-lighter: $gray-300;
$gray-light: $gray-400;
$gray: $gray-600;
$gray-dark: $gray-700;
$gray-darker: $gray-900;
$yellow-light: #fffd80;

// Overwrite some theme colors.
$primary: #f63366;
$secondary: $gray;
$light: $gray-100;
$dark: $gray;

$primary-a50: change-color($primary, $alpha: 0.5);
$white-a50: #ffffff88;
$white-a25: #ffffff44;

// Overwrite some theme fonts settings.
$font-family-sans-serif: "IBM Plex Sans", sans-serif;
$font-family-monospace: "IBM Plex Mono", monospace;

// 1rem == 16px
// (Can't set actual pixels here because it breaks bootstrap)
$font-size-base: 1rem;

$font-size-sm: 0.8rem;
$line-height-base: 1.6;
$line-height-tight: 1.25;

// Overwrite other theme settings.
$border-radius: 0.25rem;
$border-radius-sm: 0.25rem;
$border-radius-large: 0.75rem;
$btn-border-radius: $border-radius-large;

// Custom z-index values (not related to bootstrap)
$z-index-popup-menu: 140;
$z-index-sidebar-mobile: 130;
$z-index-header: 120;
$z-index-menu-button: 110;
$z-index-sidebar: 100;

// Custom values for our own use.
$m1-2-font-size-sm: $font-size-sm / 2; // m1-2 = multiply by 1/2
$m2-3-font-size-sm: $font-size-sm * 2 / 3; // m2-3 = multiply by 2/3
$m1-2-font-size-base: $font-size-base / 2; // m1-2 = multiply by 1/2

// Layout sizing
$sidebar-width: 21rem;
$content-max-width: 730px; // This number comes from bootstrap.
$header-height: 3.5rem;
$top-margin: 5rem;
$bottom-margin: $top-margin * 2;

// Custom values for full screen use.
$fullscreen-button: 2rem;
$fullscreen-padding: 0.75rem;
$fullscreen-padding-top: $header-height;

$overlayBtn-height: 2.5rem;
$overlayBtn-width: 2.5rem;
$overlayBtn-opacity-visible: 0.25;
$overlayBtn-opacity-active: 0.75;

// Animation settings
$normal-animation-duration: 300ms;

// Code
$code-color: $green;
$kbd-color: $green;
$kbd-bg: $gray-faint;
$pre-color: $black;
